import { useEffect, useState} from 'react'
import React,{useRef} from 'react'
import Goodlist from '../../components/goodlist/goolist'
import { getGoodList } from '../../tools/Ajax'
import Listpage from '../../components/listpage/listpage'
import { useSearchParams } from 'react-router-dom'
import './type.css'

function Type(props){
    
    let [search] = useSearchParams()
    console.log(search.get('type'));
    let [list,setList] = useState([])  // 原始的分类商品列表
    let ty = search.get('type')
    let [newList,setNewList] = useState([])
    let [currentIndex,setCurrentIndex] = useState('0')  // 当前展示的二级分类索引
    const ulRef = useRef()
    const divRef = useRef()


    async function getData(){
        list = []
        setList(list)
        let res = await getGoodList({type_one: ty});
        list.push(...res.data),
        setList(list)
        // getGoodList({type_one: ty}).then(res=>[
        //     console.log(16,res.data),
        //     list.push(...res.data),
        //     setList(list)
        // ])
        new_list() 

    }
    // 重置商品列表的结构
    let hasType;
    function new_list() {
        newList = [];
        setNewList(newList)
        console.log(list);
        list.forEach((goods) => {
          hasType = newList.some((obj) => {
            // console.log(222,hasType);  // true或false
            // 判断如果新数组中已经存在当前商品的二级类型
            if (goods.type_two == obj.type) {
              // 把当前商品添加到新数组中对应的分类列表
              obj.list.push(goods);
            }
            return goods.type_two == obj.type;
          });
          // 如果判断结果是,新数组中没有对应的二级分类
          if (!hasType) {
            newList.push({
              type: goods.type_two,
              list: [goods],
            });
            setNewList([...newList])
          }
        });
        console.log(2, newList);
        return newList;
    }
    

    useEffect(()=>{
        getData();
    },[ty])


    function checkout(index) {
        console.log(77,divRef);

        currentIndex = 0
        setCurrentIndex(currentIndex)
        // 记录当前点击的分类索引
        currentIndex = index;
  
        // 因为二级分类标题和h2标签一一对应, 可以找到所有的h2标题标签, 通过索引定位当前二级标题对应的那个h2标签.;
        let title = divRef.current.getElementsByClassName("type_title")[index]
        // console.log(title);

        // 获取这个h2标签相对于网页顶部的距离,也就是,当标题滚动到窗口顶部时,网页的滚动距离, (网页将要滚动的目标位置) 减80为了预留顶部导航和搜索栏的空间
        let targetTop = title.offsetTop - 80;
  
        // 让网页滚动到目标位置, 标题位于窗口顶部, document.scrollingElement指的是网页html标签或body, 在不同的浏览器内核中,指向不同
        document.scrollingElement.scrollTop = targetTop;
  
        // 优化: 点击左侧标题,实现的网页滚动,不需要滚动监听,可暂时取消滚动监听,节约性能
        
        clearScroll();
        setTimeout(() => {
        bindScroll();
        }, 1000);
    }

    function scrollHandle() {
        // console.log(1);
        // 因为滚动事件触发过于频繁,造成性能浪费,可以做限流, 每触发10次滚动事件,执行1次计算
        count++;
        if (count % 10 != 0) return;
        // console.log(2);
        // 当前网页滚动距离
        var scrollTop = document.scrollingElement.scrollTop;
        // 二级分类商品列表父标签
        var content = divRef.current;
        // 循环父标签中的每一个子标签, 指得就是每一个分类标签
        for (var i = content.children.length - 1; i >= 0; i--) {
          // 获取每一个分类标签(.type_item)到网页顶部的距离
          var offsetTop = content.children[i].offsetTop;
          // 分类标签与网页顶部距离 - 网页滚动距离 = 分类标签与窗口顶部距离
          // 判断如果分类标签与窗口顶部距离小于100说明已经滚动到这个分类了
          if (offsetTop - scrollTop < 200) {
            // console.log(i)
            this.currentIndex = i;
            // 从后向前判断时,如果有一个分类位置小于窗口下200px位置,结束判断
            break;
          }
        }
      }
    function bindScroll() {
        window.addEventListener("scroll", scrollHandle);
    }
    function clearScroll() {
        window.removeEventListener("scroll", scrollHandle);
    }
      

    


    console.log(4,list)


    return <div>
        <Goodlist></Goodlist>

        {/* 二级分类标题 */}
        <ul className="nav" ref={ulRef}>
            {
                newList.map((item, index)=>{
                    return <li className="{active:currentIndex == index}" onClick={() => checkout(index)}  key={index} >
                        {item.type}
                    </li>
                })
            }
        </ul>



        {/* 二级分类商品 */}
        <div className='type_view' ref={divRef}>
            {
                newList.map(item=>{
                    return <div className='type_item' key={item.type}>
                        <h2 className="type_title">{item.type}</h2>
                        <Listpage list={item.list}></Listpage>
                    </div>
                })
            }
        </div>
    </div>
}
export default Type